<!--交通事故-->
<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
            <FormItem label="二级集团：">
                <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
            </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="单位名称：" prop="order">
            <!--            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true"-->
            <!--                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
            <Input class="query-form-el" type="text" v-model="dataToQuery.companyName"></Input>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset1" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label="车牌号：" prop="plateNumber">
            <Input class="query-form-el" type="text" v-model="dataToQuery.plateNumber"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="年度：" prop="year">
            <DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1"
                        :clearable="false"
                        @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="事故时间：" prop="accDate">
            <DatePicker class="query-form-el" v-model="dataToQuery.accDateRange" format="yyyy-MM-dd" type="daterange"
                        placement="bottom-start" placeholder="请选择检查时间段"
                        @on-change="(date) => onSelectFieldQueryDateRange(date, 'accDate')"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset1" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <download-button :api="exportUrl" :query-form="dataToQuery"/>
          <!--<Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
    @on-sort-change="sortChange" :loading='pageStatus.loading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="this.getModalTitle('交通事故')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=800 :styles="{maxHeight:'700px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?90:null"
                :label-position="mode === 'view'?'right':'top'">

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23" v-if="mode === 'view'">
                <FormItem label='单位名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <!--<Input v-else class='query-form-el' placeholder="请填写单位名称" type='text' v-model='dataToView.companyId'></Input>-->
                  <div v-else>
                    <cascader-dom v-if="show" class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId'
                                  @setOrgname="setCompanyName" :orgTree="true"
                                  :currentOrgId="dataToView.companyId" :rootOrgId="dataToView.belongOrgId"
                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='号牌号码：' prop='carId'>
                  <div v-if="mode === 'view'">{{ dataToView.plateNumber }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写号牌号码" type='text' readonly
                         @on-focus="carModel=true" v-model='dataToView.plateNumber'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='驾驶员：' prop='driverId'>
                  <div v-if="mode === 'view'">{{ dataToView.userName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写驾驶员" type='text' readonly
                         @on-focus="driverModel=true" v-model='dataToView.userName'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='事故日期：' prop='accDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.accDate) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择事故日期"
                              v-model='dataToView.accDate'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='发生地点：' prop='accAddress'>
                  <div v-if="mode === 'view'">{{ dataToView.accAddress }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写发生地点" type='text'
                         v-model='dataToView.accAddress'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='事故经过：' prop='accState'>
                  <div v-if="mode === 'view'">{{ dataToView.accState }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写事故经过" type='text'
                         v-model='dataToView.accState'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='责任认定：' prop='affirm'>
                  <div v-if="mode === 'view'">{{ dataToView.affirmName }}</div>
                  <Select v-else v-model="dataToView.affirm">
                    <Option v-for="item in dictMap.affirmList" :value="item.codingCodeId" :key="item.index"
                            :label="item.codingName">
                      {{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='处理结果：' prop='accHandle'>
                  <div v-if="mode === 'view'">{{ dataToView.accHandle }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写处理结果" type='text'
                         v-model='dataToView.accHandle'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填报人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写填报人" readonly type='text'
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填报时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="责任认定书：">
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="责任认定书：">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload(file, 'id') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 20px">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key="item.id">
                    <a @click.prevent="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')"
                            style="margin-left: 20px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>

        <Modal :mask-closable="false" :transfer=false footer-hide v-model="carModel" :width=900 title="车辆选择"
               @on-cancel="carModel=false">
          <car-info v-if="carModel" v-show="carModel" :modelSelect="carModel"
                    :companyId="dataToView.companyId" @getSelectModelData='getSelectCar'></car-info>
        </Modal>

        <Modal :mask-closable="false" :transfer=false footer-hide v-model="driverModel" :width=900 title="驾驶员选择"
               @on-cancel="driverModel=false">
          <car-driver v-if="driverModel" v-show="driverModel" :modelSelect="driverModel"
                      @getSelectModelData='getSelectDriver'></car-driver>
        </Modal>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'

var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage, cookie} from '@/common/cacheUtils.js';
import carInfo from './saCarInfo'
import carDriver from './saCarDriver'

export default {
  components: {cascaderDom, carInfo, carDriver},
  data() {
    return {
      ...this.createCommonDataField(),
      imgUrl: "",
      columns1: [
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 200,},
        {key: 'plateNumber', title: '号牌号码', align: 'center', minWidth: 120,},
        {key: 'userName', title: '驾驶员', align: 'center', minWidth: 120,},
        {key: 'accDate', title: '事故日期', sortable: "custom",align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'accAddress', title: '发生地点', align: 'center', minWidth: 120,},
        {key: 'accState', title: '事故经过', align: 'center', minWidth: 120, tooltip: true},
        {key: 'affirmName', title: '责任认定', align: 'center', minWidth: 120, tooltip: true},
        {key: 'accHandle', title: '处理结果', align: 'center', minWidth: 120, tooltip: true},
        {key: 'createDate', title: '填报时间', sortable: "custom",align: 'center', minWidth: 120, render: this.renderCellDate},
        this.getActionColumns(),
      ],
      ruleCustom: {
        companyId: [{required: true, message: '请填写单位名称', trigger: 'change',}],
        carId: [{required: true, message: '请填写号牌号码', trigger: 'change',}],
        driverId: [{required: true, message: '请填写驾驶员', trigger: 'change',}],
        accDate: [{required: true, message: '请填写事故日期', trigger: 'change', type: 'date'}],
        accAddress: [{required: true, message: '请填写发生地点', trigger: 'change',}],
        accState: [{required: true, message: '请填写事故经过', trigger: 'change',}],
        affirm: [{required: true, message: '请填写责任认定', trigger: 'change',}],
        accHandle: [{required: true, message: '请填写处理结果', trigger: 'change',}],
        createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
        createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
        // cellPhone: [ {
        //     validator: (rule, value, callback) => {
        //         if(!(/^1[3456789]\d{9}$/.test(this.dataToView.cellPhone))){
        //             callback(' ');
        //             // this.$Message.error("请填写有效的的手机号")
        //         } else {
        //             callback()
        //         }
        //     },
        //     required: true,
        //     trigger: 'blur'
        // }],
      },
      tableHeight: 10,
      dictMap: {},
      punishment: false,
      penaltyAmount: true,
      // api
      queryUrl: Api.querySaTraff.replace('{{table}}', 'accident'),
      exportUrl: Api.exportSaTraff.replace('{{table}}', 'accident'),
      deleteUrl: Api.deleteSaTraff.replace('{{table}}', 'accident'),
      getUrl: Api.getSaTraff.replace('{{table}}', 'accident'),
      updateUrl: Api.updateSaTraff.replace('{{table}}', 'accident'),
      saveUrl: Api.saveSaTraff.replace('{{table}}', 'accident'),
      uploadUrl: Api.uploadSaTraff.replace('{{table}}', 'accident'),

      currentUser: JSON.parse(sessionStorage('userId').get('userId')),

      twoLevel: [],
      show: true,
      driverModel: false,
      carModel: false,

      fileTrue: false,
      map: {},
      uploadDissabled: false
    }
  },
  async mounted() {
    this.setTableHeight();
    this.dataToQuery.year1 = new Date()
    this.dataToQuery.year = new Date().getFullYear().toString()
    // this.selectSecGroupNames()
    await this.$http.get(Api.queryCodeDetailBySortId + '/acc-00001', {params: {}}).then((res) => {
      this.dictMap.affirmList = res.data.data
    });
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    getSelectCar(row) {
      this.$set(this.dataToView, 'carId', row.id)
      this.dataToView.plateNumber = row.plateNumber;
      this.dataToView.carType = row.carType;
      this.carModel = false;
    },
    getSelectDriver(row) {
      this.$set(this.dataToView, 'driverId', row.id)
      // this.dataToView.driverId = row.id;
      this.dataToView.userName = row.userName;
      this.driverModel = false;
    },
    selectSecGroupNames() {
      this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
        this.twoLevel = res.data.data
      }).catch(e => {
      })
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    reset1() {
      this.dataToQuery = {
        year1: new Date(),
        year: new Date().getFullYear().toString()
      };
      if (this.$refs.queryOrgCascader) {
        this.$refs.queryOrgCascader.resetCurrentOrg();
      }
      this.pagedata.currentPage = 1
      this.query()
    },
    query() {
      // if(this.dataToQuery.eventTypeIdsArrays) {
      //     this.dataToQuery.eventTypeIds = this.arrayToInFormat(this.dataToQuery.eventTypeIdsArrays)
      // }
      // this.dataToQuery.orgId = this.currentUser.companyId;
      this.queryAjax();
    },

    submit(name) {
      this.submitAjax(name);
    },
    createEmptyDataToAdd() {
      return {
        createDate: new Date(),
        createUserId: this.currentUser.userId,
        createUserName: this.currentUser.userName,
        id: this.get_uuid(),
        // idFiles:[],

      }
    },
    // async afterDataToViewInit() {
    //     await this.getFiles('id');
    // },
  },
  watch: {},
}
</script>

<style lang='css' scoped>
.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

</style>
